import Layouts from '@/components/Layout';
import React, { useEffect, useState } from 'react';
import './index.less';
import {
  Typography,
  Tabs,
  Button,
  Pagination,
  Tag,
  Avatar,
  Empty,
  Modal,
  Descriptions,
} from 'antd';
import Activity from '@/components/Activity';
import { history, useLocation, useParams } from 'umi';
import { getActivityDetail, getActivityList } from '@/service/api/touractivity';
import { ActivityList, ActivitySearch } from '@/types/touractivity';
import configs from '../../../../config/env';
const ActivityDetail: React.FC = () => {
  const params: { id: string } = useParams();
  const location = useLocation();
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const [detailInfo, setDetailInfo] = useState<ActivityList | null>(null);
  const getActDetailInfoData = async () => {
    const { data }: { data: ActivityList } = await getActivityDetail({
      id: Number(params.id),
    });
    setDetailInfo(data);
  };
  const [listData, setListData] = useState<ActivityList[]>([]);
  const [listSearchQuery, setListSearchQuery] = useState<ActivitySearch>({
    pageNum: 1,
    pageSize: 9,
    city: location['query'].city,
    id: Number(params.id),
  });
  const [listTotal, setListTotal] = useState<number>(0);
  const [listLoading, setListLoading] = useState<boolean>(false);
  const handleChangePage = (page: number, pageSize: number) => {
    setListSearchQuery({
      pageNum: page,
      pageSize,
      city: location['query'].city,
    });
  };
  const getActLikeData = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: ActivityList[]; total: number } = await getActivityList(
        listSearchQuery,
      );
      // const newArr: ActivityList[] = rows.filter((item) => item.id !== Number(params.id));
      setListData(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  useEffect(() => {
    getActLikeData();
  }, [listSearchQuery]);
  useEffect(() => {
    // 如果详情id不能转成数字的话就证明是用户在路径随便输入的字符串
    if (!isNaN(Number(params.id))) {
      getActDetailInfoData();
    } else {
      history.push('/404');
    }
  }, []);
  return (
    <Layouts>
      <Modal title="信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={800}>
        <Descriptions bordered>
          <Descriptions.Item label="国家" span={3} labelStyle={{ display: 'block', minWidth: 100 }}>
            {detailInfo?.country}
          </Descriptions.Item>
          <Descriptions.Item label="城市" span={3}>
            {detailInfo?.city}
          </Descriptions.Item>
          <Descriptions.Item label="简介" span={3}>
            {detailInfo?.intro}
          </Descriptions.Item>
        </Descriptions>
      </Modal>
      <div className="countries_detail_wrapper">
        <Typography.Title level={1}>{detailInfo?.title}</Typography.Title>
        <div className="tag_group_wrapper">
          {detailInfo?.tags &&
            detailInfo.tags.split(',').map((item, index) => (
              <Tag
                color="#2db7f5"
                className="tag_item"
                key={index}
                onClick={() => {
                  history.push({
                    pathname: '/things-to-do',
                    query: {
                      tag: item,
                    },
                  });
                }}
              >
                {item}
              </Tag>
            ))}
        </div>
        <div className="countries_main">
          <div className="left_intro_images">
            <div className="top_image">
              <img
                src={
                  detailInfo?.imgUrl
                    ? configs[process.env.API_ENV as any].API_SERVER + detailInfo?.imgUrl
                    : '/images/16643897481.jpeg'
                }
                alt=""
              />
            </div>
          </div>
          <div className="right_tab_wrapper">
            <Tabs
              defaultActiveKey="1"
              items={[
                {
                  label: `简介`,
                  key: '1',
                  children: (
                    <div className="intro_panel">
                      <div className="author_wrap">
                        <div>
                          {detailInfo?.user.avatar ? (
                            <Avatar
                              size={40}
                              src={
                                configs[process.env.API_ENV as any].API_SERVER +
                                detailInfo?.user.avatar
                              }
                              style={{ cursor: 'pointer' }}
                            />
                          ) : (
                            <Avatar size={40} src="/images/cat.e69c9c17.jpg" />
                          )}
                          <Button
                            type="link"
                            className="author_name"
                            onClick={() => {
                              history.push({
                                pathname: '/feed-detail/' + detailInfo?.user.userId,
                              });
                            }}
                          >
                            {detailInfo?.user.nickName}
                          </Button>
                        </div>
                        <div>
                          <Button ghost type="primary" onClick={showModal}>
                            查看全部信息
                          </Button>
                        </div>
                      </div>
                      {detailInfo?.intro}
                    </div>
                  ),
                },
              ]}
            />
          </div>
        </div>
        <div className="other_info_wrpper">
          <Tabs
            defaultActiveKey="other_act"
            items={[
              {
                label: `相关活动`,
                key: 'other_act',
                children: (
                  <div className="other_panel_wrppaer">
                    <div className="other_data_wrap">
                      {listData.map((item) => (
                        <Activity
                          key={item.id}
                          id={item.id}
                          country={item.country}
                          remark={item.describes}
                          userInfo={item.user}
                          imgUrl={item.imgUrl}
                          title={item.title}
                          tags={item.tags}
                          city={item.city}
                        ></Activity>
                      ))}
                    </div>
                    <div className="pagination_wrapper">
                      {listTotal !== 0 && (
                        <Pagination
                          current={listSearchQuery.pageNum}
                          total={listTotal}
                          showTitle
                          pageSize={listSearchQuery.pageSize}
                          showSizeChanger={false}
                          onChange={handleChangePage}
                        />
                      )}
                      {!listLoading && listTotal === 0 && (
                        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                      )}
                    </div>
                  </div>
                ),
              },
            ]}
          />
        </div>
      </div>
    </Layouts>
  );
};
export default ActivityDetail;
